<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- <script src="https://cdn.jsdelivr.net/npm/fabric@latest/dist/fabric.js"></script> -->
    <script src="./fabric.js"></script>
    <style>
      canvas {
        border: 1px black solid;
      }
    </style>
  </head>
  <body>
    <canvas id="step1" width="800" height="400"></canvas>

    <script>
      var canvas = new fabric.Canvas("step1");
      canvas.add(
        new fabric.Rect({ width: 50, height: 50, fill: "blue", angle: 10 })
      );
      canvas.add(
        new fabric.Circle({ radius: 50, fill: "red", top: 44, left: 80 })
      );
      canvas.add(
        new fabric.Ellipse({
          rx: 50,
          ry: 10,
          fill: "yellow",
          top: 80,
          left: 35,
        })
      );
      canvas.add(
        new fabric.Rect({
          width: 50,
          height: 50,
          fill: "purple",
          angle: -19,
          top: 70,
          left: 70,
        })
      );
      canvas.add(
        new fabric.Circle({ radius: 50, fill: "green", top: 110, left: 30 })
      );
      canvas.add(
        new fabric.Ellipse({
          rx: 50,
          ry: 10,
          fill: "orange",
          top: 12,
          left: 100,
          angle: 30,
        })
      );

      const line = new fabric.Line([50, 50, 200, 200], {
        stroke: "red", // 线条颜色
        strokeWidth: 3, // 线条宽度
        selectable: true, // 是否可选择
        evented: true, // 是否响应事件
      });
      canvas.add(line);

      canvas.on("mouse:wheel", function (opt) {
        var delta = opt.e.deltaY;
        var zoom = canvas.getZoom();
        zoom *= 0.999 ** delta;
        if (zoom > 5) zoom = 5;
        if (zoom < 0.5) zoom = 0.5;
        canvas.setZoom(zoom);
        opt.e.preventDefault();
        opt.e.stopPropagation();
      });
    </script>
  </body>
</html>
